<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>作业详情</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css">
    <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script>
    <style>
        .main-container {
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .assignment-header {
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }
        .assignment-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }
        .assignment-deadline {
            color: #666;
            font-size: 14px;
        }
        .assignment-content {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 4px;
            margin-bottom: 30px;
        }
        .content-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .submission-form {
            margin-top: 30px;
        }
        .submission-record {
            margin-top: 30px;
            background: #f5f5f5;
            padding: 20px;
            border-radius: 4px;
        }
        .record-item {
            margin-bottom: 10px;
        }
        .back-btn {
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 作业标题和截止时间 -->
                <div class="assignment-header">
                    <div class="assignment-title">${assignment.title}</div>
                    <div class="assignment-deadline">
                        截止时间：<fmt:formatDate value="${assignment.deadline}" pattern="yyyy-MM-dd HH:mm:ss"/>
                    </div>
                </div>

                <!-- 作业内容 -->
                <div class="assignment-content">
                    <div class="content-title">作业内容：</div>
                    <div class="layui-text">${assignment.content}</div>
                </div>
                
                <!-- 提交区域 -->
                <c:if test="${empty submission}">
                    <div class="submission-form">
                        <form class="layui-form" action="${pageContext.request.contextPath}/student/assignment/submit" 
                              method="post" accept-charset="UTF-8">
                            <input type="hidden" name="aid" value="${assignment.aid}">
                            
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">提交内容</label>
                                <div class="layui-input-block">
                                    <textarea name="content" placeholder="请输入作业内容" 
                                              class="layui-textarea" required rows="10"></textarea>
                                </div>
                            </div>
                            
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="submitForm">
                                        <i class="layui-icon layui-icon-ok"></i> 提交作业
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </c:if>
                
                <!-- 已提交记录 -->
                <c:if test="${not empty submission}">
                    <div class="submission-record">
                        <div class="content-title">提交记录</div>
                        <div class="record-item">
                            提交时间：<fmt:formatDate value="${submission.submitTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                        </div>
                        <div class="record-item">
                            提交内容：<div class="layui-text">${submission.content}</div>
                        </div>
                        <c:if test="${not empty submission.grade}">
                            <div class="record-item">得分：${submission.grade}</div>
                            <div class="record-item">教师评语：${submission.comment}</div>
                        </c:if>
                    </div>
                </c:if>

                <!-- 返回按钮 -->
                <div class="back-btn">
                    <button class="layui-btn layui-btn-primary" onclick="history.back()">
                        <i class="layui-icon layui-icon-return"></i> 返回列表
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            
            form.on('submit(submitForm)', function(data){
                layer.confirm('确定要提交作业吗？', {icon: 3, title:'提示'}, function(index){
                    data.form.submit();
                    layer.close(index);
                });
                return false;
            });
        });
    </script>
</body>
</html> 